<template>
  <div class="charge-rangking-wrapper">
    <div class="charge-rangking-top">
      <div class="title">充电排名</div>
      <i-tabs
        class="query-category"
        type="card"
        :tabs="tabs"
        v-model="activeName"
        @tab-click="handleClickTabs"
      ></i-tabs>
    </div>
    <div class="charge-rangking-bottom" ref="chartContainer">
      <i-tabs
        type="card"
        :tabs="tabs2"
        v-model="activeName2"
        @tab-click="handleClickTabs"
      >
      </i-tabs>
      <div ref="mapInstance"></div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import { getStyle } from '@/utils/visualizationFun'

let data = []
let yAxisData = []
let unit = ''
let echartsOption = {
  grid: {
    // show: true,
    containLabel: true,
    top: 30,
    bottom: 0,
    left: 0,
  },
  title: {
    show: false,
    text: '暂无数据',
    top: 'middle',
    left: 'center',
  },
  xAxis: {
    show: false,
  },
  yAxis: {
    type: 'category',
    inverse: true,
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      color: '#F0F0F0',
      formatter: function (value, index) {
        if ([0, 1, 2].includes(index) && value) {
          return `{number|${index + 1}}{distance|${value}}`
        } else if (value) {
          return `{number2|${index + 1}}{distance|${value}}`
        } else {
          return value
        }
      },
      rich: {
        number: {
          width: 16,
          height: 16,
          fontSize: 12,
          verticalAlign: 'center',
          align: 'center',
          backgroundColor: '#087BFF',
        },
        number2: {
          width: 16,
          height: 16,
          align: 'center',
          fontSize: 12,
          color: '#F0F0F0',
        },
        distance: {
          width: 110,
          align: 'right',
          // borderWidth: 1,
          // borderColor: 'red',
        },
      },
    },
  },
  series: [
    {
      type: 'bar',
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          { offset: 1, color: '#5f637f' },
          { offset: 0, color: 'rgba(95, 99, 127, 0.3)' },
        ]),
        borderRadius: [0, 100, 100, 0],
      },
      // barWidth: '8',
      barWidth: '18%',
      barMaxWidth: 10,
      barMinWidth: 8,
      label: {
        show: true,
        color: '#F0F0F0',
        formatter: function (obj) {
          return obj.value + unit
        },
        position: 'right',
      },
    },
  ],
}

export default {
  name: 'ChargeRanking',
  props: {
    data: {
      type: Array,
      require: true,
    },
    range: {
      type: String,
      default: 'area',
    },
    dataType: {
      type: String,
      default: 'deviceNum',
    },
  },
  data() {
    return {
      displayNum: 5,
      activeName: this.range,
      activeName2: this.dataType,
      chart: null,
      tabs: [
        {
          label: '地区',
          name: 'area',
          disabled: false,
        },
        {
          label: '电站',
          name: 'station',
        },
      ],
      tabs2: [
        {
          label: '电站数',
          name: 'deviceNum',
          unit: '个',
          ifRender: () => {
            return this.activeName === 'area'
          },
        },
        {
          label: '端口数',
          name: 'deviceNum',
          unit: '个',
          ifRender: () => {
            return this.activeName === 'station'
          },
        },
        {
          label: '近七日充电次数',
          unit: '次',
          name: 'chargeSum',
        },
        {
          label: '近七日端口平均利用率',
          unit: '%',
          name: 'plugUsage',
        },
      ],
    }
  },
  watch: {
    data(val) {
      this._setEcharts(val)
    },
  },
  methods: {
    getSize() {
      let wi = getStyle(this.$refs.chartContainer).width
      let hi = getStyle(this.$refs.chartContainer).height
      this.chart.resize({
        width: wi,
        height: `${parseInt(hi, 10) - 32}px`,
      })
    },
    _setEcharts(val) {
      data = []
      yAxisData = []
      if (val.length > 0) {
        unit = this.tabs2.find((item) => {
          return item.name === this.activeName2
        }).unit
        for (let i = 0; i < val.length; i++) {
          if (i < this.displayNum) {
            data.push(val[i].data)
            yAxisData.push(
              val[i].label.length > 8
                ? val[i].label.substr(0, 8) + '...'
                : val[i].label
            )
          }
        }
        while (data.length < this.displayNum) {
          data.push(null)
          yAxisData.push('')
        }
        this.chart.setOption({
          title: {
            show: false,
          },
          yAxis: {
            data: yAxisData,
          },
          series: [
            {
              type: 'bar',
              data: data,
            },
          ],
        })
      } else {
        this.chart.setOption({
          title: {
            show: true,
          },
          yAxis: {
            data: yAxisData,
          },
          series: [
            {
              type: 'bar',
              data: data,
            },
          ],
        })
      }
    },
    _initCharts() {
      this.chart = echarts.init(this.$refs.mapInstance)
      this.chart.setOption(echartsOption)
      this.getSize()
    },

    handleClickTabs() {
      this.$emit('changeTab', {
        tabsTopActiveName: this.activeName,
        tabsBottomActiveName: this.activeName2,
      })
    },
    setTabsDisabled() {
      this.activeName = 'station'
      this.tabs[0].disabled = true
    },
    clearTabsDisabled() {
      this.tabs[0].disabled = false
    },
  },
  activated() {
    window.addEventListener('resize', this.getSize)
  },
  deactivated() {
    window.removeEventListener('resize', this.getSize)
  },
  destroyed() {
    window.removeEventListener('resize', this.getSize)
  },
  mounted() {
    this._initCharts()
  },
}
</script>
<style lang="scss">
.charge-rangking-wrapper {
  width: 100%;
  height: calc(50% - 36px);
  margin-top: 4px;
  background: linear-gradient(180deg, #282a37 0%, #2a2c3a 100%);
  box-shadow: 0px 0px 50px 0px rgba(16, 19, 39, 0.5);
  padding: 24px 16px 16px;
  box-sizing: border-box;
  .charge-rangking-top {
    position: relative;
    display: flex;
    align-items: center;
    .title {
      font-size: 16px;
      color: #ececec;
      line-height: 16px;
      &::before {
        content: '';
        height: 14px;
        width: 3px;
        display: inline-block;
        background: #4c71f9;
        margin-right: 15px;
      }
    }
    .query-category {
      &.el-tabs--card > .el-tabs__header .el-tabs__nav {
        border: none !important;
      }

      &.el-tabs--card > .el-tabs__header .el-tabs__item {
        border-radius: 6px;
        background: #000000;
        color: #fff;
        border: none;
        position: relative;
        height: 24px;
        line-height: 24px;
        font-size: 12px;
        width: 50px;
        padding: 0 !important;
        text-align: center;
        &.is-active {
          background-color: #087bff;
          color: #fff;
          border: none;
        }
        &.is-disabled {
          cursor: not-allowed;
        }
      }
      &.el-tabs--card > .el-tabs__header .el-tabs__item {
        &.is-active:first-child {
          margin-right: -6px;
          z-index: 99;
        }
      }
      &.el-tabs--card > .el-tabs__header .el-tabs__item {
        &.is-active:last-child {
          margin-left: -6px;
          z-index: 99;
        }
      }
    }
  }
  .charge-rangking-bottom {
    height: calc(100% - 40px);
    margin-top: 24px;
    .el-tabs--card > .el-tabs__header {
      margin-left: 0;
      .el-tabs__nav {
        display: flex;
        width: 100%;
        border: none !important;
        .el-tabs__item {
          height: 32px;
          line-height: 32px;
          font-size: 12px;
          background: rgba(182, 182, 182, 0.12);
          color: rgba(236, 236, 236, 0.5);
          border: none;
          border-left: 1px solid #21222b;
          &:last-child {
            flex-grow: 1;
            border-right: 1px solid #21222b;
          }
          &.is-active {
            color: #ececec;
            background: none;
            border-top: 2px solid #087bff;
          }
        }
      }
    }
  }
}
</style>
